<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title> 医疗数据中心大屏</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <link rel="stylesheet" href="__CDN__/assets/css/visuali_index.css">
    <script src="__CDN__/assets/js/flexible.js"></script>
    <script src="__CDN__/assets/js/jquery.min.js"></script>

</head>

<body>
<div class="title">
    医疗数据中心大屏
</div>
<div class="mainbox">

    <!-- 设备统计 数量-->
    <div class="num">
        <ul>
            <a href="{:url('/fault')}?status=1">
            <li>
                <div class="num_title">已维修设备数</div>
                <di class="num_num ok_num"></di>
            </li>
            </a>
            <a href="{:url('/fault')}">
            <li>
                <div class="num_title">设备故障数</div>
                <a href="{:url('fault')}"><di class="num_num all_num"></di></a>
            </li>
            </a>
            <a href="{:url('/equipment')}">
            <li>
                <div class="num_title">设备总数</div>
                <di class="num_num equipment_num"></di>
            </li>
            </a>
            <a href="{:url('/equipment')}?sb=1">
            <li>
                <div class="num_title">待保养设备数</div>
                <di class="num_num maintained_num"></di>
            </li>
            </a>
            <a href="{:url('/equipment')}?sb=2">
            <li>
                <div class="num_title">已保养设备数</div>
                <di class="num_num equipment_ok_num"></di>
            </li>
            </a>
        </ul>
    </div>
    <!-- 圆形统计图 -->
    <div class="circular">
        <div class="circular_echsrts" id="circular"></div>
        <ul>
            <li style="color: #F59927;">设备故障率</li>
            <li style="color: #544BD5;">设备总数</li>
            <li style="color: #DBC632;">本月故障率</li>
            <li style="color: #209883;">本周故障率</li>
        </ul>
    </div>
    <!-- 设备故障情况 波线图 -->
    <div class="wave">
        <div class="maintain_title">
            <div class="maintain_title_left">设备故障情况</div>
            <div class="maintain_title_right" id="choice_operation">
                <span style="margin-right:0.8125rem" id="wave_content">周</span>
                <img src="__CDN__/assets/img/dowm.png" alt="">
                <ul class="maintain_title_list wave_week">
                    <li class="week">周</li>
                    <li class="month">月</li>
                </ul>
            </div>
        </div>
        <div class="wave_echarts" id="wave"></div>
    </div>
    <!-- 待保养设备详情 -->
    <div class="maintain">
        <div class="maintain_title">
            <div class="maintain_title_left">待保养设备详情</div>
            <div class="maintain_title_right">
                        <span style="margin-right:0.8125rem"
                              id="maintain_content">周</span>
                <img src="__CDN__/assets/img/dowm.png" alt="">
                <ul class="maintain_title_list maintain_week">
                    <li class="week">周</li>
                    <li class="month">月</li>
                </ul>
            </div>
        </div>
        <div class="maintain_echarts" id="maintain">
        </div>
        <div class="com-screen-content">
            <div class="topRec_List maintained">
                <dl>
                    <dd>科室</dd>
                    <dd>ID</dd>
                    <dd>名称</dd>
                    <dd>型号</dd>
                </dl>
                <div class="maquee"  id="maintain_list">
                    <ul>

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 设备操作记录  -->
    <div class="operation">
        <div class="maintain_title">
            <div class="maintain_title_left">设备操作记录</div>
            <div class="maintain_title_right">
                        <span style="margin-right:0.8125rem"
                              id="operation_content">周</span>
                <img src="__CDN__/assets/img/dowm.png" alt="">
                <ul class="maintain_title_list operation_week">
                    <li class="week">周</li>
                    <li class="month">月</li>
                </ul>
            </div>
        </div>
        <div class="maintain_echarts" id="operation"></div>
        <div class="com-screen-content">
            <div class="topRec_List operationed">
                <dl>
                    <dd>时间</dd>
                    <dd>科室</dd>
                    <dd>ID</dd>
                    <dd>名称</dd>
                    <dd>型号</dd>
                </dl>
                <div class="maquee" id="operation_list">
                    <ul>

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 设备故障详情 列表 -->
    <div class="detail">
        <div class="detail_title">故障设备详情</div>
        <dl>
            <dd>科室</dd>
            <dd>ID</dd>
            <dd>名称</dd>
            <dd>型号</dd>
        </dl>
        <div id="detail_list">
            <ul>

            </ul>
        </div>
    </div>
    <!-- 进入系统 -->
    <div class="enter">
        进入系统
    </div>
</div>

<!--  <script type="text/javascript"
    src="https://cdn.jsdelivr.net/npm/echarts@5.0.1/dist/echarts.min.js"></script> -->
<script src="__CDN__/assets/js/echarts.js"></script>
<script src="__CDN__/assets/js/wave.js"></script>
<script src="__CDN__/assets/js/circular.js"></script>
<script src="__CDN__/assets/js/maintain.js"></script>
<script src="__CDN__/assets/js/operation.js"></script>
<script src="__CDN__/assets/js/detail.js"></script>
<script>
    var baseUrl = 'https://ylsbnew.westts.cn//hIBWzukObC.php/Phase'

    var interval
    $(document).ready(function () {
        getNum()//设备统计 数量
        getcircular()//圆形统计图
        getwave()// 设备故障情况
        getoperation()//设备操作记录
        getdetail()//设备故障详情
        getmaintain()//带保养设备详情
    });
    function getNum() {
        $.ajax({
            url: baseUrl+"/getRecord",
            type: 'POST',
            dataType: "json",
            success: function (data) {
                $(".ok_num").text(data.data.ok_num)
                $(".all_num").text(data.data.all_num)
                $(".equipment_num").text(data.data.equipment_num)
                $(".maintained_num").text(data.data.maintained_num)
                $(".equipment_ok_num").text(data.data.equipment_ok_num)
            },
            // 超时时间
            timeout: 18000,
            // 失败的回调
            error: function () {
                clearInterval(interval);
                alert('请求数据失败！')
            }
        })
    }
    (function () {
        interval = setInterval(function () {
            getNum();
            getcircular()
            getwave()
            getoperation()
            getdetail()
            getmaintain()
        }, 1800000);
        /*    }, 1800000); */
    })();

    var a = 0
    $('.enter').click(function () {
        if (a == 0) {
            requestFullScreen()
            a = 1
        } else {
            a = 0
            exitFullscreen()
        }

    })

    //进入全屏
    function requestFullScreen() {
        var de = document.documentElement;
        if (de.requestFullscreen) {
            de.requestFullscreen();
        } else if (de.mozRequestFullScreen) {
            de.mozRequestFullScreen();
        } else if (de.webkitRequestFullScreen) {
            de.webkitRequestFullScreen();
        }
    }

    //退出全屏
    function exitFullscreen() {
        var de = document;
        if (de.exitFullscreen) {
            de.exitFullscreen();
        } else if (de.mozCancelFullScreen) {
            de.mozCancelFullScreen();
        } else if (de.webkitCancelFullScreen) {
            de.webkitCancelFullScreen();
        }
    }

</script>
</body>

</html>